<template>
  <div>
    <!-- 搜索表单 行内表单 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="form.name" @keyup.native.enter="onsubmit"
        placeholder="模糊查询导演姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">导演列表</el-divider>
    <person v-for="(item,i) in directors" :key="i" :name="item.director_name"
    :avatar="item.director_avatar" @delete="deleteItem(i,$event)"></person>
  </div>
</template>

<script>
import myaxios from '@/http/MyAxios.js'
import Person from '@/components/Person.vue'
export default {
    components:{Person},
    data() {
        return {
            // 表单数据
            form:{
                name:'',
            },
            // 导演列表
            directors:[],
        }
    },
    // 组件挂载完毕后自动调用生命周期方法
    mounted(){
        console.log('mounted');
        let url='http://localhost:3010/movie-directors'
        let params={page:1,pagesize:20}
        myaxios.get(url,params).then(res=>{
            console.log(res);
            this.directors=res.data.data
        })
    },
    methods: {
      deleteItem(i,params){
        let id=this.directors[i].id
        console.log('删除演员'+id);
        this.$http.directorApi.del({id}).then(res=>{
          if(res.data.code==200){
            this.$message({type:'success',message:'删除完成'})
            this.directors.splice(i,1)
          }
        })
      },
        onSubmit() {
            let url='http://localhost:3010/movie-directors/name'
            myaxios.post(url,this.form).then(res=>{
              console.log(res);
              this.directors=res.data.data
            })
        },
    },
};
</script>

<style lang="scss" scoped>
</style>